<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box2 {
				width: 100%;
				height: 60px;
				background: rgba(200,100,100, 0.5);
				line-height: 60px;
			}
		</style>
		<script src="js/jquery-1.12.3.js"></script>
		<script>
			$(function(){
				
				var box2Top = $("#box2").offset().top;
				console.log(box2Top);

				$(window).scroll(function(){
					var scrollTop = $(window).scrollTop();
					
					if (scrollTop >= box2Top) {
						$("#box2").css({position:"fixed", top:0})
					}
					else  {
						$("#box2").css({position:"static"});
					}
					
				})
				
			})
		</script>
	</head>
	<body style="height: 2000px;">
		<div id="box1">box1
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
		</div>
		<div id="box2">box2</div>
		<div id="box3">box3
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
		</div>
	</body>
</html>
